<p>
  <img src="Weight Tracker_image.png">
</p>
<p>The <code>Weight Tracker</code> is a <a href="#root/_help_GLks18SNjxmC">Script API</a> showcase
  present in the <a href="#root/_help_wX4HbRucYSDD">demo notes</a>.</p>
<p>By adding <code>weight</code> as a <a href="#root/_help_OFXdgB2nNk1F">promoted attribute</a> in
  the <a href="#root/_help_KC1HB96bqqHX">template</a> from which <a href="#root/_help_l0tKav7yLHGF">day notes</a> are
  created, you can aggregate the data and plot weight change over time.</p>
<h2>Implementation</h2>
<p>The <code>Weight Tracker</code> note in the screenshot above is of the type <code>Render Note</code>.
  That type of note doesn't have any useful content itself. Instead it is
  a placeholder where a <a href="#root/_help_CdNpE2pqjmI6">script</a> can render
  its output.</p>
<p>Scripts for <code>Render Notes</code> are defined in a <a href="#root/_help_zEY4DaJG4YT5">relation</a> called <code>~renderNote</code>.
  In this example, it's the <code>Weight Tracker</code>'s child <code>Implementation</code>.
  The Implementation consists of two <a href="#root/_help_6f9hih2hXXZk">code notes</a> that
  contain some HTML and JavaScript respectively, which load all the notes
  with a <code>weight</code> attribute and display their values in a chart.</p>
<p>To actually render the chart, we're using a third party library called
  <a
  href="https://www.chartjs.org/">chart.js</a>which is imported as an attachment, since it's not built into
    Trilium.</p>
<h3>Code</h3>
<p>Here's the content of the script which is placed in a <a href="#root/_help_6f9hih2hXXZk">code note</a> of
  type <code>JS Frontend</code>:</p><pre><code class="language-text-x-trilium-auto">async function getChartData() {
    const days = await api.runOnBackend(async () =&gt; {
        const notes = api.getNotesWithLabel('weight');
        const days = [];

        for (const note of notes) {
            const date = note.getLabelValue('dateNote');
            const weight = parseFloat(note.getLabelValue('weight'));

            if (date &amp;&amp; weight) {
                days.push({ date, weight });
            }
        }

        days.sort((a, b) =&gt; a.date &gt; b.date ? 1 : -1);

        return days;
    });

    const datasets = [
        {
            label: "Weight (kg)",
            backgroundColor: 'red',
            borderColor: 'red',
            data: days.map(day =&gt; day.weight),
            fill: false,
            spanGaps: true,
            datalabels: {
                display: false
            }
        }
    ];

    return {
        datasets: datasets,
        labels: days.map(day =&gt; day.date)
    };
}

const ctx = $("#canvas")[0].getContext("2d");

new chartjs.Chart(ctx, {
    type: 'line',
    data: await getChartData()
});</code></pre>
<h2>How to remove the Weight Tracker button from the top bar</h2>
<p>In the link map of the <code>Weight Tracker</code>, there is a note called <code>Button</code>.
  Open it and delete or comment out its contents. The <code>Weight Tracker</code> button
  will disappear after you restart Trilium.</p>